<template>
	<view style="padding: 20px;">
		<button @click="onSetTimeCall()">单次计时器setTimeout</button>
		<button @click="onSetTimeCallxy(userName,password)">带参数的setTimeout</button>
		<button @click="onSetTimeClear()">取消定时器</button>
		<button @click="onInteral()">周期定时器</button>
		<button @click="onInteralClear()">取消周期定时器</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: 'wst',
				password: '32767',
				timeoutID1: 101,
				timeoutID2: 202,
				count: 0
			}
		},
		methods: {
			onSetTimeCall() {
				console.log("onSetTimeout");
				// setTimeout(callback,ms,ayn[]),首个参数为延迟第二个参数的时间后执行的匿名
				this.timeoutID1 = setTimeout(()=>{
					//延时之后要执行的代码
					console.log("延迟2s后执行");
				},2000)
			},
			
			onSetTimeCallxy(name,pwd) {
				console.log("onSetTimeout带参");
				// 推荐用接口传参
				console.log("onSetTimeout--> name:"+name+",pwd:"+pwd);
				// 面向对象中，不推荐直接引用参数
				// console.log("onSetTimeout--> name:"+this.userName+",pwd:"+this.password);
				
				// 第三个参数往后的变量按书写顺序传递给匿名函数
				setTimeout((x,y)=>{
					console.log("传递参数x >"+x+" y > "+pwd);
				},2000,name,pwd)
			},
			
			onSetTimeClear() {
				console.info("onSetTimeClear--> 取消定时器,ID:"+this.timeoutID);
				clearTimeout(this.timeoutID);
			},
			
			onInteral() {
				this.timeoutID2 = setInterval(()=>{
					this.count++
					console.log("周期打印次数："+this.count);
				},1000)
			},
			
			onInteralClear() {
				console.log("onInteralClear");
				clearInterval(this.timeoutID2);
			}
		}
	}
</script>

<style>
button{
	margin: 10px;
}
</style>
